<template>
    <div>
        <scroller
            :on-refresh="refresh"
            :on-infinite="infinite"
            ref="infinite"
            class="list"
        >
            <div
                class="listCont"
                to="addressCont"
                v-for="(item, index) in shopSource"
                :key="index"
                @click="shopCont(item.id)"
            >
                <img :src="item.logo">
                <div>
                    <p>{{item.shop_name}}</p>
                    <p>{{item.address}}</p>
                    <div @click.stop>
                        <p @click="map(index)">地图/导航 ></p>
                    </div>
                </div>
            </div>
        </scroller>
        <Footer :idx="2" />
    </div>
</template>
<script>
import wxGetAddress from '../../config/wxGetAddress.js';
import wxOpenAddress from '../../config/wxOpenAddress.js';
import Footer from '../../component/Footer'
export default {
    data() {
        return {
            page: 1,
            limit: 10,
            noData: true,
            shopSource: [],
            lat: '35.960918',
            lon: '120.217209',
        };
    },
    methods: {
        getWXAddress() {
            let params = {
                url: location.href.split('#')[0],
            };
            this.$post("Index/getWxConfig", params)
                .then(res => {
                    if (res.code === 20000) {
                        wxGetAddress(res.data, this.getAddressSucceed)
                    }
                })
                .catch(err => { });
        },
        getAddressSucceed(lat, lon) {
            this.lat = lat
            this.lon = lon
            this.page = 1;
            this.shopData(true);
        },
        map(index) {
            let params = {
                url: location.href.split('#')[0],
            };
            this.$post("Index/getWxConfig", params)
                .then(res => {
                    if (res.code === 20000) {
                        wxOpenAddress(res.data, this.shopSource[index])
                    }
                })
                .catch(err => { });
        },
        shopCont(id) {
            this.$router.push({ path: '/addressCont', query: { shop_id: id } })
        },
        // 方法
        infinite() {
            this.shopData();
        },
        refresh() {
            this.page = 1;
            this.shopData(true);
        },
        infoData() {
            let params = {
                apis: ['getLocation']
            };
            this.$post("Index/getWxConfig", params)
                .then(res => {
                    if (res.code === 20000) { }
                })
                .catch(err => { });
        },
        shopData(type) {
            let params = {
                lon: this.lon,
                lat: this.lat,
                page: this.page,
                limit: this.limit,
            };
            this.$post("shop/getShopByDistance", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.page++;
                        if (type) {
                            this.shopSource = res.data;
                            setTimeout(() => {
                                this.$refs.infinite.finishPullToRefresh();
                            }, 500);
                        } else {
                            if (this.lon || this.lat) {
                                for (let i in res.data) {
                                    let newData = res.data[i];
                                    this.shopSource.push(newData);
                                }
                            }
                            if (res.data.length < this.limit) {
                                this.noData = false;
                                this.$refs.infinite.finishInfinite(true);
                            } else {
                                this.$refs.infinite.finishInfinite();
                            }
                        }
                    }
                })
                .catch(err => { });
        }
    },
    components: {
        'Footer': Footer,
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#f3f3f3");
    },
    created() {
        this.getWXAddress();
        // 实例创建完成
        // this.infoData();
        // this.shopData();
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/address");
</style>